<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>个人资料</title>
    <meta name="format-detection" content="telephone=no">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-touch-fullscreen" content="yes">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <link rel="stylesheet" href="css/amazeui.min.css"/>
    <link rel="stylesheet" href="css/personalData.css"/>
    <link rel="stylesheet" href="css/loading.css"/>
</head>
<body>
<div class="header">
    <h2><a href="javascript:history.go(-1)" ><span></span>我的资料</a></h2>
</div>
<div data-am-widget="slider" class="mySlider am-slider am-slider-a1" id="demo-slider-0" data-am-slider='{&quot;directionNav&quot;:false}' >
    <ul class="mySliderUl am-slides" id="imgList">
        <li><img src="images/certification-icon.png" alt=""/></li>
    </ul>
</div>
<div class="basics clearfix">
    <span class="name">Lxiaom</span>
    <span class="city"><i></i>北京</span>
</div>
<form id="form1" action="" method="get">
    <div class="upload">
        <p>上传<span></span></p>
        <div class="upload-box hide">
            <div class="uploadBg">
                <span name="img" id="logo" class="js-demo-slider-btn" data-action="add"></span>
            </div>
        </div>

    </div>
</form>

<article class="htmleaf-container">
    <div id="clipArea"></div>
    <div class="foot-use">
        <div class="uploader1 blue">
            <input type="button" name="file" class="button" value="打开"/>
            <input id="file" type="file" onchange="setImagePreview();" accept="image/*" multiple />
        </div>
        <button id="clipBtn">截取</button>
    </div>
    <div id="view"></div>

</article>


<div class="certification-box">
    <h2>认证信息</h2>
    <p class="certification-info">认证信息 <span>未认证</span></p>
    <p class="certification-edu">学历 <span>未认证</span></p>
    <p class="certification-house">资产认证(房) <span>未认证</span></p>
    <p class="certification-car">资产认证(车) <span>未认证</span></p>
</div>

<div class="personal-box">
    <h2>个人信息</h2>
    <div class="personal-box1 clearfix">
        <span>属猴</span>
        <span>射手座</span>
        <span>北京</span>
    </div>
    <div class="personal-box2">
        <p><i>工作</i><span>无</span></p>
        <p><i>教育</i><span>本科</span></p>
        <p><i>经济</i><span>无房无车</span></p>
        <p><i>性格</i><span>大方</span></p>
        <p><i>兴趣爱好</i><span>无</span></p>
        <p><i>父母情况</i><span>大方</span></p>
        <p><i>择偶要求</i><span>有车有房</span></p>
    </div>
</div>

<div class="interest-box">
    <h2>兴趣爱好</h2>
    <div class="content">
        <div class="item item1">
            <div class="item-top">
                <h3><i></i>个人标签</h3>
            </div>
            <div class="icon icon1">
                <span>白皙</span>
                <span>甜美</span>
                <span>气质美女</span>
                <span>有气质</span>
                <span>孝顺</span>
                <span>温柔</span>
                <span>善解人意</span>
                <span>独立</span>
                <span>孝顺</span>
                <span>孝顺</span>
                <span>孝顺</span>
                <span>孝顺</span>
            </div>
        </div>
        <div class="item item2">
            <div class="item-top">
                <h3><i></i>我喜欢的电影</h3>
            </div>
            <div class="icon icon2">
                <span>黑天鹅</span>
                <span>哈尔的移动城堡</span>
                <span>加勒比海盗</span>
            </div>
        </div>
        <div class="item item3">
            <div class="item-top">
                <h3><i></i>我喜欢的音乐</h3>
            </div>
            <div class="icon icon3">
                <span>钢琴曲</span>
                <span>周杰伦</span>
                <span>民谣</span>
            </div>
        </div>
        <div class="item item4">
            <div class="item-top">
                <h3><i></i>我喜欢的书籍</h3>
            </div>
            <div class="icon icon4">
                <span>设计中的设计</span>
            </div>
        </div>
        <div class="item item5">
            <div class="item-top">
                <h3><i></i>我喜欢的美食</h3>
            </div>
            <div class="icon icon5">
                <span>韩式料理</span>
                <span>提拉米苏</span>
                <span>云南菜</span>
                <span>锅包肉</span>
                <span>芒果</span>
                <span>东北菜</span>
                <span>菠萝饭</span>
                <span>炸糕</span>
                <span>西红柿炒鸡蛋</span>
            </div>
        </div>
        <div class="item item6">
            <div class="item-top">
                <h3><i></i>我喜欢的运动</h3>
            </div>
            <div class="icon icon6">
                <span>跑步</span>
                <span>排球</span>
            </div>
        </div>
    </div>
</div>
<div class="spinner">
    <div class="bounce1"></div>
    <div class="bounce2"></div>
    <div class="bounce3"></div>
</div>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/iscroll-zoom.js"></script>
<script type="text/javascript" src="js/hammer.js"></script>
<script type="text/javascript" src="js/jquery.photoClip.js"></script>
<script type="text/javascript" src="js/amazeui.min.js"></script>
<script type="text/javascript">
    var objUrl = '';

    $("#clipArea").photoClip({
        width:320,
        height:220,
        file:"#file",
        view:"#view",
        ok:"#clipBtn"
    });
    function setImagePreview() {
        var preview = document.getElementById("preview"), file_head = document.getElementById("file"),picture = file_head.value;
        if (!picture.match(/.jpg|.gif|.png|.bmp/i))
            return alert("您上传的图片格式不正确，请重新选择！");
        if (preview && file_head.files && file_head.files[0])
            preview.style.display = "block",
                    preview.style.width = "63px",
                    preview.style.height = "63px",
                    preview.src = window.navigator.userAgent.indexOf("Chrome") >= 1 || window.navigator.userAgent.indexOf("Safari") >= 1 ? window.webkitURL.createObjectURL(file_head.files[0]) : window.URL.createObjectURL(file_head.files[0]);
        //return document.getElementById("DivUp").style.display = "block";
    }

    $(function(){
        var oUploadBox = $(".upload .upload-box");
        $(".upload p").click(function(){
            if(oUploadBox.hasClass("hide")){
                oUploadBox.removeClass("hide");
            }else{
                oUploadBox.addClass("hide");
            }
        })
    });

    $("#logo").click(function(){
        $(".htmleaf-container").show();
    });

    $(function() {
        var $slider = $('#demo-slider-0');
        var counter = 0;
        var mySlider = $(".mySlider");
        var mySliderUl = mySlider.find("ul");
        var mySliderLi = "";
        var len;
        var val;
        var img;
        var span;
        var num = 0;
        /*$(".upload input").change(function(){
            mySliderLi = mySliderUl.find("li");
            len = mySliderLi.length ;
            if(len == 3 && num ==0){
                if ($(this)[0].files && $(this)[0].files[0]){
                    /!*span = $("<span>×</span>");*!/
                    img = $("<img />");
                    var reader = new FileReader();
                    reader.onload = function(ev){
                        img.attr("src",ev.target.result);
                    };
                    reader.readAsDataURL($(this)[0].files[0]);
                    var oLi = $('<li></li>').append(img);
                    $slider.flexslider('addSlide',oLi);
                    $slider.flexslider('removeSlide', $slider.flexslider('count') - 2);
                    num += 1;

                }
            }else if(len<7){
                if ($(this)[0].files && $(this)[0].files[0]){
                    /!*span = $("<span>×</span>");*!/
                    img = $("<img />");
                    var reader = new FileReader();
                    reader.onload = function(ev){
                        img.attr("src",ev.target.result);
                    };
                    reader.readAsDataURL($(this)[0].files[0]);
                    var oLi = $('<li></li>').append(img);
                    $slider.flexslider('addSlide',oLi);
                }

            }
            //$("#form1").submit();
        });*/

        /*$(".mySlider ul").on("click","span",function(){
            var index = $(this).index();
            mySliderLi = mySliderUl.find("li");
            len = mySliderLi.length ;
            if(index == 0 || index == len-1){

            }else{
                $slider.flexslider('removeSlide', index);
            }

        })*/


        $("#clipBtn").click(function(){
            $(".spinner").show();
            mySliderLi = mySliderUl.find("li");
            len = mySliderLi.length ;
            if(len == 3 && num ==0){
                /*span = $("<span>×</span>");*/
                img = $("<img />");
                img.attr("src",imgsource);
                var oLi = $('<li></li>').append(img);
                $slider.flexslider('addSlide',oLi);
                $slider.flexslider('removeSlide', $slider.flexslider('count') - 2);
                num += 1;

            }else if(len<7){
                /*span = $("<span>×</span>");*/
                img = $("<img />");
                img.attr("src",imgsource);
                var oLi = $('<li></li>').append(img);
                $slider.flexslider('addSlide',oLi);
            }
            $(".htmleaf-container").hide();
            //$("#form1").submit();

            $.ajax({
                cache: true,
                type: "POST",
                url:"b.php",
                data:{src:imgsource},
                async: false,
                error: function(request) {
                },
                success: function(data) {
                    //alert(data);
//                    $(".spinner").hide();
                }
            });
        });

    });

</script>
</body>
</html>